<!--
 * @Author: yumao 123456
 * @Date: 2024-01-22 09:20:54
 * @LastEditors: yumao 123456
 * @LastEditTime: 2024-03-13 10:23:53
 * @FilePath: \交易所大屏\src\views\home\components\homeDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="dialogHome">
        <el-dialog
            :visible="dialogVisible"
            :modal-append-to-body="false"
            :show-close="false"
            :before-close="handleClose"
        >
            <div class="digbox">
                <div class="dialogTitle">
                    <p class="name">{{ homeDiName }}详情</p>
                    <div class="elRbox">
                        <div class="echoExel" @click="getallEcho"></div>
                        <div class="close" @click="handleClose"></div>
                    </div>
                </div>
                <div class="headR">
                    <p class="headTi" v-if="digalogSerchData.length">
                        所属范围
                    </p>
                    <div class="serchCont">
                        <div
                            v-for="(item, index) in digalogSerchData"
                            :key="index"
                            class="serchCont-p"
                        >
                            <span
                                v-if="
                                    item.key != 'fromDate' ||
                                    item.key != 'toDate'
                                "
                                >{{ item.value }}</span
                            >
                        </div>
                    </div>
                </div>
                <div class="tableBox">
                    <!-- v-el-table-infinite-scroll=“getCompanyList” ： 设置加载的参数
:infinite-scroll-distance=“10” ： 距离底部多少的时候在可以触发加载
:infinite-scroll-disabled=“disabledScroll” ： 控制禁用的属性 -->
                    <el-table
                        :data="tableData"
                        :header-cell-style="headerCellStyle"
                        :row-class-name="tableRowClassName"
                        style="width: 100%"
                        class="customer-table"
                        height="550"
                        v-loadmore="isSroll"
                    >
                        <el-table-column
                            v-for="(item, index) in tableHead"
                            :key="index"
                            :prop="item.key"
                            :label="item.value"
                            min-width="170"
                        >
                            <template slot-scope="scope">
                                <el-tag
                                    effect="dark"
                                    color="#57aff5c2"
                                    v-if="item.key === 'xmhx'"
                                    style="cursor: pointer"
                                    class="openinfo"
                                    ><router-link
                                        :to="{ path: '/xmhx' }"
                                        target="_blank"
                                        >项目画像</router-link
                                    ></el-tag
                                >
                                <span v-else>{{ scope.row[item.key] }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-if="loading" class="loadingBox">
                        <i class="el-icon-loading"></i>加载中...
                    </div>
                    <p v-if="noMore" class="noMoreBox">没有更多了</p>
                </div>
                <!-- <div class="pageBox">
                    <el-pagination
                        v-if="pageParams.page"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageParams.page"
                        :page-size="pageParams.pageSize"
                        layout="total, prev, pager, next"
                        :total="pageParams.total"
                    >
                    </el-pagination>
                </div> -->
                <div class="tableBox" v-show="false" id="out-table">
                    <el-table
                        :data="tableDataAll"
                        style="width: 100%"
                        class="customer-table"
                    >
                        <el-table-column
                            v-for="(item, index) in tableHeadAll"
                            :key="index"
                            :prop="item.key"
                            :label="item.value"
                            min-width="170"
                        >
                        </el-table-column>
                    </el-table>
                    <el-table :data="[]">
                        <el-table-column prop="title" label="">
                        </el-table-column>
                    </el-table>
                    <!-- 筛选条件 -->
                    <el-table :data="serchDataecho">
                        <el-table-column prop="title" label="所属范围：">
                        </el-table-column>
                        <el-table-column prop="value" label="">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import {
    listingAmount,
    transactionAmount,
    operator,
    cash,
    listedCustomers,
    transactionCustomers,
    returningCustomers,
    listingInstitutions,
    bid,
    premiumRate,
    monthlyListingTransactions,
    monthlyListingTransactionsMoney,
    cityTransactionSituation,
    transactionRate,
    hangingProjects,
    rateofbid,
    projectDetails,
    transactionTop
} from '@/api/home.js'
export default {
    directives: {
        loadmore: {
            bind(el, binding, vnode) {
                if (!binding.value) {
                    return false
                }
                const selectWrap = el.querySelector('.el-table__body-wrapper')
                selectWrap.addEventListener('scroll', function () {
                    let sign = 0
                    const scrollDistance =
                        selectWrap.scrollHeight -
                        selectWrap.scrollTop -
                        selectWrap.clientHeight
                    if (scrollDistance <= sign) {
                        vnode.context.loadMore()
                    }
                })
            }
        }
    },

    props: {
        paramsData: {
            type: Object,
            default: {
                city: '',
                area: '',
                operator: '',
                fromDate: '2023-01-01',
                toDate: '2023-12-31',
                year: '',
                month: '',
                customer: '',
                listedAmount: '',
                transactionAmount: '',
                fee: '',
                bid: '',
                bidTop: '',
                day: '',
                returningCustomer: '',
                page: 1,
                pageSize: 10
            }
        },
        homeDiName: {
            type: String,
            default: ''
        },
        serchData: {
            type: Array,
            default: () => {
                return []
            }
        },
        isSroll: {
            typeof: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: true,
            pageParams: {
                page: 1,
                pageSize: 10,
                pages: 0,
                total: 0
            },
            tableData: [],
            tableHead: [],
            tableDataAll: [],
            tableHeadAll: [],
            serchDataecho: [],
            digalogSerchData: [],
            noMore: '',
            loading: ''
        }
    },
    computed: {},
    created() {
        this.digalogSerchData = this.serchData
    },
    mounted() {
        this.getInfoDetials()
    },
    watch: {},
    methods: {
        getInfoDetials() {
            switch (this.homeDiName) {
                case '挂牌金额':
                    listingAmount(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '成交金额':
                    transactionAmount(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '经办人业绩':
                    operator(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '出入金':
                    cash(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '挂牌客户':
                    listedCustomers(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '成交客户':
                    transactionCustomers(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '再购客':
                    returningCustomers(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '挂牌机构':
                    listingInstitutions(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '竞价数':
                    bid(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '溢价率':
                    premiumRate(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '月挂牌成交量':
                    monthlyListingTransactions(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '月挂牌成交量金额':
                    monthlyListingTransactionsMoney(this.paramsData).then(
                        (res) => {
                            this.assignment(res)
                        }
                    )
                    break
                case '市区成交情况':
                    cityTransactionSituation(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '交易费率':
                    transactionRate(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '在挂项目天数':
                    hangingProjects(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case 'TOP竞价率':
                    rateofbid(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case '项目详情':
                    projectDetails(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break
                case 'TOP交易费':
                    transactionTop(this.paramsData).then((res) => {
                        this.assignment(res)
                    })
                    break

                default:
                    break
            }
        },
        assignment(res) {
            // this.pageParams.page = res.data.data.pageNum
            // this.pageParams.pageSize = res.data.data.pageSize
            // this.pageParams.total = res.data.data.total
            // this.tableData = res.data.data.list
            // this.tableHead = res.data.header
            this.pageParams.page = res.data.data.pageNum
            this.paramsData.page = res.data.data.pageNum
            this.pageParams.pages = res.data.data.pages
            this.pageParams.total = res.data.data.total
            // if (res.data.header.some((item) => item.key == 'xmhx')) {
            //     this.xmhxFlag = true
            // } else {
            //     this.xmhxFlag = false
            // }
            // if (res.data.header.length) {
            //     this.tableHead = res.data.header.filter(
            //         (item) => item.key != 'xmhx'
            //     )
            // }
            this.tableHead = res.data.header
            this.tableData = this.tableData.concat(res.data.data.list)
            this.loading = false
        },
        handleClose(done) {
            this.$emit('closeInfo')
            // this.$confirm('确认关闭？')
            //     .then((_) => {
            //         done()
            //     })
            //     .catch((_) => {})
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            this.paramsData.page = val
            this.getInfoDetials()
        },
        headerCellStyle({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0)
                return "background:rgba(26, 31, 46, 1);font-size: 18px;color: #FFFFFF;height:45px;font-weight: bold;line-height: 45px;border:none;font-family: 'pingfang'"
        },
        tableRowClassName({ row, rowIndex }) {
            let index = rowIndex + 1
            if (index % 2 == 0) {
                return 'warning-row'
            } else {
                return 'success-row'
            }
        },
        // 导出
        getallEcho() {
            let echoParams = { ...this.paramsData }
            echoParams.page = 1
            echoParams.pageSize = 1000000000

            switch (this.homeDiName) {
                case '挂牌金额':
                    listingAmount(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '成交金额':
                    transactionAmount(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '经办人业绩':
                    operator(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '出入金':
                    cash(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '挂牌客户':
                    listedCustomers(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '成交客户':
                    transactionCustomers(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '再购客':
                    returningCustomers(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '挂牌机构':
                    listingInstitutions(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '竞价数':
                    bid(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '溢价率':
                    premiumRate(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '月挂牌成交量':
                    monthlyListingTransactions(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '月挂牌成交量金额':
                    monthlyListingTransactionsMoney(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '市区成交情况':
                    cityTransactionSituation(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '交易费率':
                    transactionRate(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '在挂项目天数':
                    hangingProjects(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case 'TOP竞价率':
                    rateofbid(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case '项目详情':
                    projectDetails(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break
                case 'TOP交易费':
                    transactionTop(echoParams).then((res) => {
                        this.assignmentall(res)
                    })
                    break

                default:
                    break
            }
        },
        assignmentall(res) {
            this.tableDataAll = res.data.data.list
            if (res.data.header.length) {
                this.tableHeadAll = res.data.header.filter(
                    (item) => item.key != 'xmhx'
                )
            }

            this.getSerchDataecho()
        },
        //导出范围
        getSerchDataecho() {
            let excellData = []
            this.serchDataecho = []
            let serchObjarr = []
            for (let key in this.paramsData) {
                if (
                    this.paramsData[key] != '' &&
                    key != 'page' &&
                    key != 'pageSize' &&
                    key != 'fromDate' &&
                    key != 'toDate'
                ) {
                    serchObjarr.push({
                        key: key,
                        value: this.paramsData[key]
                    })
                }
            }
            serchObjarr.map((item) => {
                let name = ''
                switch (item.key) {
                    case 'city':
                        name = '城市'
                        break
                    case 'area':
                        name = '地区'
                        break
                    case 'operator':
                        name = '经办人'
                        break
                    case 'fromDate':
                        name = '开始时间'
                        break
                    case 'toDate':
                        name = '结束时间'
                        break
                    case 'year':
                        name = '年'
                        break
                    case 'month':
                        name = '月份'
                        break
                    case 'customer':
                        name = '挂牌客户'
                        break
                    case 'listedAmount':
                        name = '挂牌金额'
                        break
                    case 'transactionAmount':
                        name = '成交金额'
                        break
                    case 'fee':
                        name = '交易费'
                        break
                    case 'bid':
                        name = '竞价数'
                        break
                    case 'bidTop':
                        name = '竞价率'
                        break
                    case 'day':
                        name = '再挂天数'
                        break
                    case 'returningCustomer':
                        name = '客户类型'
                        break

                    default:
                        break
                }
                let otr = {
                    key: item.key,
                    value: item.value,
                    name: name
                }
                excellData.push(otr)
            })

            if (
                this.paramsData.fromDate != '' &&
                this.paramsData.fromDate != null
            ) {
                let timeDate = {
                    key: 'dateAll',
                    value:
                        this.paramsData.fromDate +
                        '至' +
                        this.paramsData.toDate,
                    name: '日期范围'
                }
                excellData.unshift(timeDate)
            }
            excellData.map((item) => {
                let obj = {
                    title: item.name + ':',
                    value: item.value
                }
                this.serchDataecho.push(obj)
            })
            if (this.tableHeadAll) {
                this.$message({
                    showClose: true,
                    message: '正在导出数据，请稍等',
                    type: 'warning'
                })
                let _this = this
                setTimeout(() => {
                    var wb = XLSX.utils.table_to_book(
                        document.querySelector('#out-table')
                    )
                    var wbout = XLSX.write(wb, {
                        bookType: 'xlsx',
                        bookSST: true,
                        type: 'array'
                    })

                    try {
                        FileSaver.saveAs(
                            new Blob([wbout], {
                                type: 'application/octet-stream'
                            }),
                            _this.homeDiName + '.xlsx'
                        )
                    } catch (e) {
                        if (typeof console !== 'undefined')
                            console.log(e, wbout)
                    }
                    return wbout
                }, 1000)
            }
        },
        loadMore() {
            if (this.pageParams.page >= this.pageParams.pages) {
                //当前页码数等于总页数的时候,提示没有更多数据了
                this.loading = false
                this.noMore = true
                console.log('到底了')
            } else {
                //当数据没有加载完的时候,继续加载数据
                this.loading = true
                this.paramsData.page++ //当前页数字加一
                this.getInfoDetials()
            }
        }
    }
}
</script>

<style lang="scss" >
.dialogHome {
    .digbox {
        width: 1348px;
        height: 730px;
        background-image: url('../../../assets/home/dialogBg.png');
        background-size: 100% 100%;
        box-sizing: border-box;
    }
    .dialogTitle {
        width: 100%;
        display: flex;
        height: 71px;
        justify-content: space-between;
        .name {
            width: 778px;
            height: 71px;
            background-image: url('../../../assets/home/dialogT.png');
            background-size: 100%;
            font-weight: bold;
            font-size: 22px;
            color: #ffffff;
            letter-spacing: 3px;
            font-size: 'pingfang';
            line-height: 71px;
            text-indent: 80px;
        }
        .elRbox {
            display: flex;
        }
        .echoExel {
            width: 71px;
            height: 71px;
            background-image: url('../../../assets/home/echo.png');
            background-size: 100%;
            cursor: pointer;
            transition: background-image 0.3s ease-in-out; /* 定义过渡效果为1秒内平滑变化 */
            &:hover {
                background-image: url('../../../assets/home/echoText.png'); /* 当鼠标悬浮时更改背景图片 */
            }
        }
        .close {
            width: 71px;
            height: 71px;
            background-image: url('../../../assets/home/close.png');
            background-size: 100%;
            cursor: pointer;
            margin-left: 10px;
            transition: background-image 0.3s ease-in-out; /* 定义过渡效果为1秒内平滑变化 */
            &:hover {
                background-image: url('../../../assets/home/closeText.png'); /* 当鼠标悬浮时更改背景图片 */
            }
        }
    }
    .tableBox {
        width: 90%;
        margin: 0 auto;
    }
    .el-dialog__body {
        padding: 0 !important;
    }
    .el-dialog__header {
        display: none;
    }
    .el-dialog {
        background: transparent;
        width: 1348px;
    }

    // 去掉表格单元格边框
    .customer-table th {
        border: none;
    }
    .customer-table td,
    .customer-table th.is-leaf {
        border: none;
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: transparent !important;
    }
    .el-table .cell {
        line-height: 25px;
    }

    .el-table .el-table__cell.gutter {
        background: #1b1d2a;
    }
    .el-table tr {
        background: transparent;
    }
    // ------
    // 去掉表格单元格边框
    .customer-table th {
        border: none;
    }
    .customer-table td,
    .customer-table th.is-leaf {
        border: none;
    }
    // 表格最外边框
    .el-table--border,
    .el-table--group {
        border: none;
    }
    // 头部边框
    .customer-table thead tr th.is-leaf {
        border: 1px solid #ebeef5;
        border-right: none;
    }
    .customer-table thead tr th:nth-last-of-type(2) {
        border-right: 1px solid #ebeef5;
    }
    // 表格最外层边框-底部边框
    .el-table--border::after,
    .el-table--group::after {
        width: 0;
    }
    .customer-table::before {
        width: 0;
    }
    .customer-table .el-table__fixed-right::before,
    .el-table__fixed::before {
        width: 0;
    }
    // 表格有滚动时表格头边框
    .el-table--border th.gutter:last-of-type {
        border: 1px solid #ebeef5;
        border-left: none;
    }
    // 去除边框线
    .el-table::before {
        height: 0;
    }

    .el-table .warning-row {
        // background: rgba(0, 156, 255, 0.1);
        background: linear-gradient(
            90deg,
            rgba(32, 55, 99, 0) 0%,
            rgba(42, 66, 114, 0.48) 12%,
            #132955 48%,
            rgba(44, 68, 114, 0.64) 87%,
            rgba(6, 11, 20, 0) 100%
        );
    }

    .el-table .success-row {
        background: rgba(0, 156, 255, 0.02);
    }
    .el-table th .gutter {
        display: table-cell !important;
    }
    .el-table {
        height: 405px;
        font-size: 14px;
        color: #dff0ff;
        font-weight: 400;
        line-height: 28px;
        border: none;
        background: transparent;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background: rgba(24, 47, 191, 0.3);
        border-radius: 6px;
    }
    .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px; // 横向滚动条
        height: 12px; // 纵向滚动条 必写
        background: rgba(28, 31, 46, 1);
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
        border-radius: 10px; /*滚动条的背景区域的圆角*/
        background: rgba(28, 31, 46, 1); /*滚动条的背景颜色*/
    }
    //去除鼠标触摸变色效果
    .el-table tbody tr:hover > td {
        background: rgba(0, 157, 255, 0.393);
    }

    .el-pagination,
    .el-pagination__total,
    .el-pagination__jump,
    .el-pager li.btn-quicknext,
    .el-select-dropdown__item {
        color: #fff !important;
    }
    .el-pagination .btn-next,
    .el-pagination .btn-prev {
        background: center center no-repeat rgba(0, 0, 0, 0.3) !important;
        color: #fff !important;
    }
    .el-pager li {
        background: rgba(25, 17, 84, 0.3) !important;
    }
    .el-input__inner {
        color: #fff !important;
        border: 1px solid #0095f4 !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background: #0095f4 !important;
    }
    .pageBox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .headR {
        display: flex;
        width: 90%;
        margin: 10px auto 0;
        align-items: center;
    }
    .headTi {
        width: 60px;
        font-family: 'pingfang';
        font-weight: bold;
        font-size: 14px;
        color: #01d5fc;
        line-height: 38px;
    }
    .serchCont {
        color: #ffffff;
        font-weight: 400;
        font-size: 14px;
        font-family: 'pingfang';
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 50px);

        &-p {
            margin-left: 4px;
            margin-bottom: 4px;
            padding: 0 12px 0 12px;
            height: 25px;
            background-image: url('../../../assets/home/minBgbox.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
        }
        .minclose {
            width: 25px;
            height: 25px;
            cursor: pointer;
        }
    }
    .loadingBox {
        text-align: center;
        font-size: 14px;
        color: #dff0ff;
    }
    .noMoreBox {
        text-align: center;
        font-size: 14px;
        color: #dff0ff;
    }
    .openinfo {
        a {
            display: block;
            width: 100%;
            height: 100%;
            color: #ffffff;
            background: transparent;
            text-decoration: none;
            &:hover {
                text-decoration: none;
                background-color: transparent;
                color: #ffffff !important;
            }
        }
    }
}
.dialogHome .customer-table td,
.dialogHome .customer-table th.is-leaf {
    border: none !important;
}
</style>